/* 大伽对接 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, DatePicker, Modal, Select,message } from 'antd'
import moment from 'moment';
/* 引用接口文档路径 */
import {
  report,reportDelete,reportHide,
} from 'actions/communityManage'
import {getbasetypefetch} from 'actions/common'
import '../../style/userControl.less'

const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      contentModal:false,//列表内容详情弹窗
      userList:"",//列表内容详情
      publishTime:"",
      auditList:[]
    }
    this.keyword={"userName":"","publishTime":"","status":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
  }
  componentDidMount() {
    this.selectList();
    this.getAuditStatus()
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "userName":this.props.form.getFieldValue('userName'),
      "publishTime":this.state.publishTime,
      "status":this.props.form.getFieldValue('status'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(report(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  
  getAuditStatus(){
    this.props.dispatch(getbasetypefetch(
      {"type":11},
      (respose) => {
        this.setState({
          auditList: respose.respData.resultData,
        })
    }))
  }

  submitTimeFn(value){//发布时间
    if(value){
      value = value._d.format("yyyy-MM-dd hh:mm:ss") 
    }else{
      value = ""
    }
    this.state.publishTime = value 
  }

  changeSelect(value){//贴子状态
    this.listStatus = value;
  }

  contentModalCancel(){//关闭查看弹窗
    this.setState({
      contentModal: false,
    },()=>{
      this.setState({
        userList: "",
      })
    })
  }

  showModal(data){//点击查看按钮
    this.setState({
      contentModal: true,
      userList:data
    })
    // this.props.dispatch(report(
    //   datajson,
    //   (respose) => {
    //     this.setState({
    //       list: respose,
    //     })
    // }))
  }

  deleteData(id){//查看之后的删除按钮
    Modal.confirm({
      title: '确定要删除么？',
      onOk:()=>{
        this.props.dispatch(reportDelete({"id":id},
        (respose) => {
          var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
          if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
            this.currentNumber = this.currentNumber - 1;
          }
          message.success(respose.respMsg);
          this.contentModalCancel();
          this.selectList(this.currentNumber); 
        }))
      },
      onCancel:()=>{
      },
    })
    
  }
  showHideData(id,type){//查看之后的隐藏按钮
    Modal.confirm({
      title: '确定要这么操作么？',
      onOk:()=>{
        this.props.dispatch(reportHide({"reportId":id,"status":type},
          (respose) => {
            message.success(respose.respMsg);
            this.selectList(this.currentNumber);        
            this.contentModalCancel();
        }))
      },
      onCancel:()=>{
      },
    })

  }



  columns() {//表格标题
    return [
      {
        title: '编号',
        key: 'reportCode',
        dataIndex: 'reportCode',
        width: '10%',
      },
      {
        title: '发帖人',
        dataIndex: 'userName',
        key: 'userName',
        width: '10%',        
      },
      {
        title: '发帖时间',
        dataIndex: 'publishTime',
        key: 'publishTime',
        width: '10%',
      },
      {
        title: '帖子内容',
        dataIndex: 'content',
        key: 'content',
        width: '20%',
      },
      {
        title: '图片',
        dataIndex: 'imageAddr',
        key: 'imageAddr',
        width: '25%',
        render: (text, recordId, index) => 
        <div>
          {
            (text?text:[]).map((item,i)=> {
              return(
                <div key={i} className="imgDiv">
                  <img src={item} />                  
                </div>
              )
            })
          }
        </div>,
      },
      {
        title: '举报原因',
        dataIndex: 'causeOfReport',
        key: 'causeOfReport',
        width: '15%',
      },
      {
        title: '操作',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.showModal.bind(this,text)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>          
        </div>,
        
      },
    ]
  }
  


  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const joinList = this.state.userList.id ? this.state.userList :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="发表人">      
              {
                getFieldDecorator('userName', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }             
            </FormItem>
            <FormItem label="发表时间">
              <DatePicker onChange={this.submitTimeFn.bind(this)} format={dateFormat} />
            </FormItem>
            <FormItem label="贴子状态">
              {
                getFieldDecorator('range', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Select placeholder="请选帖子状态"    style={{ width: 200 }} >
                    <Select.Option value={""} key={99}>全部</Select.Option>                  
                    {
                      this.state.auditList.map((item,i)=> {
                        return(
                          <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                        )
                      })
                    }
                  </Select>
                )
              }
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={respData.dynamicReportList}
            pagination={{ total: respData.count, current:this.currentNumber,pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
          />
        </Spin>
        {/* 信息展示弹窗 */}
        <Modal
          width={"80%"}
          visible={this.state.contentModal}
          title="查看详情"
          onCancel={this.contentModalCancel.bind(this)}
          footer={[
            <Button key="delete" type="primary"  onClick={this.deleteData.bind(this,joinList.id)}>删除</Button>,
            joinList.status == 1 ? <Button  key="hide" type="primary"  onClick={this.showHideData.bind(this,joinList.id,2)}>隐藏</Button>
             :<Button  key="show" type="primary"  onClick={this.showHideData.bind(this,joinList.id,1)}>显示</Button>,
            ,
          ]}
        >
          <ul className="joinBlackListModal">
            <li>
              <span className="title">发帖人:</span><span className="content">{joinList.userName}</span>
            </li>
            <li>
              <span className="title">帖子内容:</span><span className="content">{joinList.content}</span>
            </li>
            <li>
              <span className="title">帖子图片:</span><span className="content">
              {              
                  (joinList.imageAddr?joinList.imageAddr : []).map((item,i)=> {
                      return(
                        <div className='imgShow' key={i}>
                          <img  src={item} />
                        </div> 
                      )
                  })                  
              }
              </span>
            </li>
            <li>
              <span className="title">累计评论:</span><span className="content">{joinList.commentTotal}</span>
            </li>
            <li>
              <span className="title">累计被赞:</span><span className="content">{joinList.fabulousTotal}</span>
            </li>
            <li>
              <span className="title">帖子状态:</span><span className="content">{joinList.status == 1?'已通过':(joinList.status == 2 ? '已隐藏' : '已下沉')}</span>
            </li>
          </ul>
        </Modal>
      </div>
    )
  }
}
